<!-- 产品页 下载组件 -->
<template>
  <div class="download">

    <div class="info-button">
      <!-- Windows 下载 -->
      <a href="https://dl.udresource.com/hbimhxir/udunwallet-win.exe" download="windows">
        <img class="pcImg" src="../../assets/imgs/UdunDownloadWin.svg" alt="">
      </a>
      <!-- macOS 下载 -->
      <a href="https://dl.udresource.com/hbimhxir/udunwallet-macos.dmg" download="windows">
        <img class="pcImg" src="../../assets/imgs/UdunDownloadMac.svg" alt="">
      </a>


      <!-- Android 下载 -->
      <el-popover placement="bottom" :width="200" :height="200" trigger="hover" :offset="parseFloat(offsetNumber)">
        <!-- 默认显示的标签 -->
        <template #reference>
          <a href="https://dl.udresource.com/hbimhxir/udunwallet-win.exe" download="windows">
            <img class="phoneImg" src="../../assets/imgs/UdunDownloadAndroid.png" alt="">
            <span>
              Android
            </span>
          </a>
        </template>
        <!-- 鼠标光标划过显示的弹出框 -->
        <template #default>
          <div>
            <img class="QRCode" src="../../assets/imgs/UdunDownloadAndroidQRcode.png" alt="">
          </div>
        </template>
      </el-popover>


      <!-- iOS 下载 -->
      <el-popover placement="bottom" :width="200" :height="200" trigger="hover" :offset="parseFloat(offsetNumber)">
        <!-- 默认显示的标签 -->
        <template #reference>
          <a href="https://dl.udresource.com/hbimhxir/udunwallet-win.exe" download="windows">
            <img class="phoneImg" src="../../assets/imgs/UdunDownloadiOS.png" alt="">
            <span>
              iOS
            </span>
          </a>
        </template>
        <!-- 鼠标光标划过显示的弹出框 -->
        <template #default>
          <div>
            <img class="QRCode" src="../../assets/imgs/UdunDownloadiOSQRcode.png" alt="">
          </div>
        </template>
      </el-popover>

    </div>



    <!-- iOS 的说明 -->
    <div class="iosInfo">
      <p>
        iOS用户需要登录到<span>苹果公司的海外 ID </span>安装
      </p>
      <p>
        您还可以扫描二维码来安装，并使用描述文件在设置 > 一般 > 设备管理
      </p>
    </div>

  </div>
</template>

<script setup>
 const offsetNumber = ref(0)
</script>

<style lang="less" scoped>
.download {
  padding-top: 30px;
  padding-bottom: 30px;

  .info-button {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    a {
      width: 170px;
      height: 56px;
      background: #f7f7f7;
      border-radius: 20px;
      text-align: center;
      margin-left: 20px;
      margin-right: 20px;

      .pcImg {
        width: 100%;
        padding-top: 10px;
      }

      .phoneImg {
        width: 32px;
        padding-top: 10px;
        vertical-align: bottom;
      }

      span {
        font-size: 22px;
        margin-left: 10px;
      }
    }

    a:hover {
      color: #000;
    }


  }

  .iosInfo {
    color: #aaa;

    p {

      span {
        color: #0abe5f;
      }

    }

  }

}

.QRCode {
  width: 180px;
  height: 180px;
}
</style>